<template>
  <div class="content">
    <Resize>
      <template v-slot:left>
        <div class="content_l">
          <div class="left-btn">
            <vxe-toolbar v-if="false">
              <template #buttons>
                <vxe-button @click="$refs.xTree.setAllTreeExpand(true)"
                  >全部展开</vxe-button
                >
                <vxe-button @click="$refs.xTree.clearTreeExpand()"
                  >全部关闭</vxe-button
                >
                <vxe-button @click="getSiteList" v-if="siteRow"
                  >返回站点</vxe-button
                >
                <!-- <vxe-button @click="getSiteList">返回站点</vxe-button> -->
              </template>
            </vxe-toolbar>
            <vxe-toolbar>
              <template #buttons>
                <vxe-radio-button
                  v-model="value7"
                  :label="true"
                  v-if="false"
                  :content="value7 ? '全部关闭' : '全部展开'"
                  :strict="false"
                  size="mini"
                  :disabled="!siteRow"
                ></vxe-radio-button>
                <vxe-button
                  size="mini"
                  @click="getSiteList"
                  :disabled="!siteRow"
                  >返回站点</vxe-button
                >
                <!-- <vxe-button @click="getSiteList">返回站点</vxe-button> -->
              </template>
            </vxe-toolbar>
          </div>
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="leftList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            @current-change="clickLeftRow"
            class="left-table"
          >
            <vxe-column tree-node show-overflow>
              <template #default="{ row }">
                <span>
                  <span
                    v-if="
                      (row.channelId || row.siteId) == currentRowId && !row.root
                    "
                    class="activeRow"
                  >
                    <svg-icon icon-class="right" style="color: #009a94" />
                  </span>
                  <!-- 电脑 -->
                  <img
                    src="../../../assets/icons/png/Display Check.png"
                    alt=""
                    style="vertical-align: text-bottom"
                    v-if="row.root == '000'"
                  />
                  <!-- 地球 -->
                  <img
                    src="../../../assets/icons/png/globe.gif"
                    alt=""
                    style="vertical-align: bottom"
                    v-if="!row.channelId && row.root != '000'"
                  />

                  <img
                    src="../../../assets/icons/png/folderopen.gif"
                    alt=""
                    style="vertical-align: text-bottom"
                    v-if="row.channelId && $refs.xTree.isTreeExpandByRow(row)"
                  />

                  <img
                    src="../../../assets/icons/png/folder.gif"
                    alt=""
                    style="vertical-align: text-bottom"
                    v-if="row.channelId && !$refs.xTree.isTreeExpandByRow(row)"
                  />

                  <!-- <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? 'el-icon-folder-opened' : 'el-icon-folder'" v-if="siteRow&& row.channelId"></i> -->

                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
      <template v-slot:right>
        <div class="content_r">
          <template v-if="workflowDetail">
            <div class="set_top content-wrap">
              <span>
                栏目 《 <font color="red"> {{ columnRow.name }}</font
                >》 已配置文件流程 ：
                <font color="blue" style="text-indent: 2em; fontsize: 20px">{{
                  workflowDetail.workflowName
                }}</font>
              </span>

              <h3 style="height: 30px; line-height: 30px">
                <font color="red"> 流程的详细配置信息：</font>
              </h3>
              <strong
                v-if="
                  workflowDetail.workFlowVoList &&
                  workflowDetail.workFlowVoList.length == 0
                "
              >
                {{ workflowDetail.workflowName }}
              </strong>
              <div class="boxxxx" style="overflow: auto" v-else>
                <ul class="reset-steps">
                  <li
                    v-for="(item, index) in workflowDetail.workFlowVoList"
                    :key="index"
                    :class="item.wfName != '结束' ? 'step-item' : 'step-item2'"
                  >
                    <span class="name">{{ item.wfName }}</span>
                    <div
                      class="set"
                      v-if="!ifShowSetList.includes(item.wfName)"
                    >
                      <template>
                        <ul class="userList">
                          <li style="color: #000">人员名单 ：</li>
                          <li
                            v-if="
                              !(
                                item.personVoList &&
                                item.personVoList.length > 0
                              )
                            "
                          >
                            <font color="blue"> 使用系统默认配置!</font>
                          </li>
                          <li
                            v-for="userItem in item.personVoList"
                            :key="userItem.userId"
                            @mouseenter="userId = userItem.userId"
                            @mouseleave="userId = null"
                          >
                            {{ userItem.name }}({{ userItem.loginId }})
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <!-- <el-popover placement="right" width="400" trigger="focus">
                        aaaa
                        <el-link type="primary" slot="reference" @mouseenter="(userItem)">  </el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                      </el-popover> -->
                            <el-popconfirm
                              confirm-button-text="好的"
                              cancel-button-text="不用了"
                              icon="el-icon-info"
                              icon-color="red"
                              title="确定删除该用户吗？"
                              @confirm="delUser(userItem, item)"
                              v-hasPermi="['system:channel:edit']"
                              style="display: inline-block"
                            >
                              <!-- <i slot="reference" :class="userId==userItem.userId?'el-icon-error':'el-icon-close'"></i> -->
                              <img
                                slot="reference"
                                src="../../../assets//images/wrong.png"
                                alt=""
                                style="vertical-align: bottom"
                              />
                            </el-popconfirm>
                            ,
                          </li>
                          <li>
                            <el-button
                              @click="setFlowPeople(item)"
                              type="primary"
                              size="mini"
                              v-hasPermi="['system:channel:edit']"
                              >配置人员</el-button
                            >
                          </li>
                          <i></i>
                          <i></i>
                          <i></i>
                        </ul>
                        <!-- <el-link slot="reference" type="cyan" style="display:block;fontSize:14px">人员名单: <i class="el-icon-view el-icon--right"></i> </el-link> -->
                      </template>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

            <div class="set_bottom content-wrap">
              <el-divider content-position="left">
                以下为重新为栏目选择流程区域：</el-divider
              >
              <span v-hasPermi="['system:channel:edit']">
                重新为本栏目选择流程：
                <el-select
                  v-model="workflowId"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="dict in flowOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
                <el-button type="cyan" @click="saveLiuchengSet" size="mini"
                  >保存</el-button
                >
              </span>
              <div style="margin: 10px 0" v-hasPermi="['system:channel:edit']">
                将此栏目配置的流程信息
                <font color="red">（包括流程各步骤人员）</font>共享到其他栏目：
                <el-button @click="setShareFlow" size="mini"
                  >选择栏目</el-button
                >
              </div>
            </div>
          </template>
          <template v-else>
            <Null></Null>
          </template>
        </div>
      </template>
    </Resize>

    <!-- 栏目流程 分享  -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogCloumn"
      width="450px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar>
            <template #buttons>
              <vxe-button
                v-if="false"
                @click="$refs.xTree.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree.clearTreeExpand()"
                >全部关闭</vxe-button
              >
            </template>
          </vxe-toolbar>
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="leftList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            :checkbox-config="{
              labelField: 'name',
              checkStrictly: true,
              checkMethod,
              visibleMethod,
            }"
            class="left-table"
          >
            <vxe-column type="checkbox" tree-node show-overflow>
              <template #default="{ row }">
                <span>
                  <template v-if="row.children && row.children.length">
                    <i
                      class="tree-node-icon fa"
                      :class="
                        $refs.xTree.isTreeExpandByRow(row)
                          ? 'fa-folder-open-o'
                          : 'fa-folder-o'
                      "
                    ></i>
                  </template>
                  <template v-else>
                    <i class="tree-node-icon fa fa-file-o"></i>
                  </template>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="copySure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 配置人员选择 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogUser"
      width="700px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="bottom">
        <div class="bottom_l">
          <el-input
            v-model="query"
            size="small"
            clearable
            placeholder="通过用户姓名、用户名进行查询"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <span slot="suffix" class="el-input__count"
              >{{ checkUserList.length }}/{{ allUserList.length }}</span
            >
          </el-input>
          <el-checkbox-group v-model="checkUserList" class="left-table">
            <el-checkbox
              :label="item.userId"
              v-for="item in filteredData"
              :key="item.userId"
              :style="{ width: item.name.length > 8 ? '50%' : '' }"
            >
              {{ item.name }}-({{ item.loginId }})
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="sureSetFlowPeople">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getListArticle,
  getArticleOption,
  articleCopy,
  articleMove,
  articleSetTop,
  articleSetJump,
  articleRemove,
  moveUpArticle,
  moveDownArticle,
  workFlowConfig,
  workflowUserList,
  shareWFToOtherChannel,
  saveWorkflowUser,
  saveNewWorkflow,
} from "@/api/content/article";
import {
  getChannelListForTree,
  publicChannel,
  moveUserFormWF,
} from "@/api/content/clounm";

import { listSite } from "@/api/content/net";
import Null from "./null";
export default {
  data() {
    return {
      // 哪些不需要 配置人员按钮
      ifShowSetList: ["开始", "结束", "草稿", "发起人", "发起人发布"],
      //全部展开 全部关闭
      value7: false,
      //左侧站点列表
      leftList: [],
      //历史模板列表

      //点击当前 站点行
      siteRow: null,
      //点击当前栏目行
      columnRow: {},
      //当前栏目流程设置详情
      workflowDetail: null,
      //下拉框 选中得流程
      workflowId: "",
      //流程配置字典
      flowOptions: [],
      //流程管理中 人员名单中 鼠标移入对应的userid
      userId: null,
      //流程 中人员配置  流程id
      setWorkFlowDetail: {},

      //配置人员中      流程定义中的可选择人员
      allUserList: [],
      // 话框中选中对的栏目数组
      cloumnId: [],
      // 弹出层标题
      title: "",
      //栏目分享对话框
      dialogCloumn: false,
      //配置人员
      dialogUser: false,
      //选中的配置人员
      checkUserList: [],
      //筛选输入框
      query: "",
    };
  },

  components: { Null },

  computed: {
    filteredData() {
      return this.allUserList.filter((item) => {
        return (
          item.name.indexOf(this.query) > -1 ||
          item.loginId.indexOf(this.query) > -1
        );
      });
    },
    currentRowId() {
      return this.columnRow?.channelId || this.siteRow?.siteId;
    },
  },
  created() {
    // this.getDicts("channel_flow_set").then((response) => {
    //   this.flowOptions = response.data;
    // });
    this.getDicts("channel_flow_set").then((response) => {
      this.flowOptions = response.data.filter((item) => {
        return item.status == "0";
      });
    });
  },
  mounted() {
    this.getSiteList();
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
    value7(value) {
      if (value) {
        this.$refs.xTree.setAllTreeExpand(true);
      } else {
        this.$refs.xTree.clearTreeExpand();
        //展开第一个节点
        this.$nextTick(() => {
          this.$refs.xTree.setTreeExpand(this.leftList[0], true);
        });
      }
    },
  },

  methods: {
    //获取站点列表
    getSiteList() {
      this.value7 = false;
      this.siteRow = null;
      this.workflowDetail = null;
      listSite()
        .then((res) => {
          this.leftList = [
            { name: "流程设置-站点列表", root: "000", children: res.data },
          ];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          });
        });
    },
    //获取模板列表
    clickLeftRow({ row }) {
      if (row.siteId && row.channelId) {
        this.columnRow = row;

        this.haldleClickCloumn();
      } else if (row.siteId) {
        if (this.siteRow) {
          this.workflowDetail = null;
          return;
        }
        this.siteRow = row;

        this.haldleClickSite();
      }
    },

    //点击站点行  获取栏目列表
    haldleClickSite() {
      getChannelListForTree({ siteId: this.siteRow.siteId })
        .then((res) => {
          this.siteRow.children = this.handleTree(res.data, "channelId").filter(
            (item) => item.parentId == this.siteRow.siteId
          );
          this.siteRow.root = "111";
          this.leftList = [this.siteRow];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          });
        });
    },
    //点击栏目  获取栏目流程
    haldleClickCloumn() {
      // workFlowConfig(this.columnRow.channelId).then((res) => {
      //   // if (res.code == 200) {
      //   //   this.flowOptions = res.data.filter((item) => {
      //   //     return item.status == "0";
      //   //   });
      //    if (res.code == 200) {
      //     this.workflowDetail = res.data;
      //     this.drawer_setting = true;
      //   }
      // });

      workFlowConfig(this.columnRow.channelId).then((res) => {
        if (res.code == 200) {
          this.workflowDetail = res.data;
          this.drawer_setting = true;
        }
      });
    },
    //栏目分享
    setShareFlow() {
      this.dialogCloumn = true;
      this.title = "共享栏目流程设置";
      //展开第一个节点
      this.$nextTick(() => {
        this.$refs.xTree.setTreeExpand(this.leftList[0], true);
      });
    },
    //确认流程分享
    copySure() {
      let selection = this.$refs.xTree.getCheckboxRecords();
      this.cloumnId = selection.map((item) => item.channelId);

      if (this.cloumnId.length == 0) {
        this.msgError("请选择栏目");
        return;
      }
      shareWFToOtherChannel({
        cIds: this.cloumnId.join(","),
        channelId: this.columnRow.channelId,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("共享流程成功");
        }
        this.cacle();
      });
    },

    //删除流程中的人员
    delUser(user, item) {
      moveUserFormWF({
        channelId: this.columnRow.channelId,
        users: user.userId,
        workflowId: item.workflowId,
        workflowStatusId: item.workflowStatusId,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("人员删除成功");
          this.haldleClickCloumn();
        }
      });
    },
    //配置人员   获取全部可选人员
    setFlowPeople(item) {
      this.setWorkFlowDetail = item;
      workflowUserList({
        channelId: this.columnRow.channelId,
        siteId: this.siteRow.siteId,
        workflowStatusId: item.workflowStatusId,
      }).then((res) => {
        if (res.code == 200) {
          this.allUserList = res.data;
          this.dialogUser = true;
          this.title = "流程设置";
        }
      });
    },
    //保存流程定义人员
    sureSetFlowPeople() {
      saveWorkflowUser({
        channelId: this.columnRow.channelId,
        workflowStatusId: this.setWorkFlowDetail.workflowStatusId,
        workflowId: this.setWorkFlowDetail.workflowId,
        users: this.checkUserList.join(","),
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("配置成功");
          this.haldleClickCloumn();
        }
        this.cacle();
      });
    },
    //保存流程
    saveLiuchengSet() {
      if (this.workflowId)
        saveNewWorkflow({
          channelId: this.columnRow.channelId,
          workflowId: this.workflowId,
        }).then((res) => {
          this.haldleClickCloumn();
          this.workflowId = "";
        });
    },
    cacle() {
      this.dialogCloumn = false;
      this.dialogUser = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.checkUserList = [];
      this.query = "";
      this.cloumnId = [];
    },
    //复选框方法，disable第一行的
    checkMethod({ row }) {
      return row.channelId && row.channelId != this.columnRow.channelId;
    },
    visibleMethod({ row }) {
      return row.channelId;
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.content {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  display: flex;
  flex-direction: row;
  // padding: 10px;
  position: relative;
  border: 1px solid #ccc;
  .content_l {
    overflow: auto;
    // min-width: 240px;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      min-width: 240px;
    }
  }
  .content_r {
    overflow: overlay;
    overflow: auto;
    width: 100%;
    // padding: 10px;
    border-left: 1px solid #ccc;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .reset-steps {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: auto;
      :first-child {
        .set {
          display: none !important;
        }
      }
      .step-item {
        min-height: 60px;
        height: auto;
        position: relative;
        margin: 10px;
        display: flex;
        justify-content: space-between;
        border: 1px dashed #ccc;
        .name {
          display: inline-block;
          height: 100%;
          // min-width: 300px;
          width: auto;
          margin-right: 20px;
        }
        .set {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: flex-start;

          .userList {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            justify-content: flex-end;
            align-items: center;
            // max-height: 500px;
            // overflow: auto;
            li {
              cursor: pointer;
              color: blue;
              // width: 50%;
              // line-height: 30px;
              // height: 30px;
            }
            i {
              // width: 50%;
            }
          }
        }
        &:after {
          content: "";
          height: 40px;
          width: 3px;
          background: red;
          position: absolute;
          left: 20px;
          bottom: 0px;
        }
        &:before {
          content: "";
          border: 10px solid transparent;
          border-top-color: #f00;
          width: 10px;
          height: 10px;
          position: absolute;
          bottom: 10px;
          left: 11px;
          transform: translateY(20px);
        }
        &:last-child:after,
        &:last-child:before {
          display: none;
        }
      }
      .step-item2 {
        min-height: 60px;
        height: auto;
        position: relative;
        margin: 10px;
        display: flex;
        justify-content: space-between;
        border: 1px dashed #ccc;
        .name {
          display: inline-block;
          height: 100%;
          // min-width: 300px;
          width: auto;
          margin-right: 20px;
        }
        .set {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: flex-start;

          .userList {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            justify-content: flex-end;
            align-items: center;
            // max-height: 500px;
            // overflow: auto;
            li {
              cursor: pointer;
              color: blue;
              // width: 50%;
              // line-height: 30px;
              // height: 30px;
            }
            i {
              // width: 50%;
            }
          }
        }
      }
      .lineActive {
        background-color: #1e4b9f;
      }
    }
    .set_top {
      min-height: 40%;
      padding: 10px 20px;
      flex: 1;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
    .set_bottom {
      height: auto;
      padding: 10px 20px;
    }
  }
}

.bottom {
  display: flex;
  // height: 500px;
  height: 50vh;

  .bottom_l {
    // overflow: auto;
    flex: 1;
    height: 100%;
    background: #fffbf0 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      .el-checkbox {
        width: 33%;
        margin-right: 0;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  // .bottom_r {
  //   flex: 1;
  //   overflow: auto;
  //   background: #fbfeff;
  //   padding: 0 0 0 30px;
  // }
}
</style>
